<template>
  <div class="main">
    <div class="left-side">
      <Image :src="userInfoStore.getInfo().icon" />
      <div class="menu-list">
        <template v-for="item in menuList">
          <div @click="changeMenu(item)">
            <div
              :class="[
                'tab-item iconfont',
                item.icon,
                item.path == currentMenu.path ? 'active' : '',
              ]"
            >
              <template v-if="item.name == 'chat'">
                <Badge :count="chatNum" :top="5" :left="14"></Badge>
              </template>
              <template v-if="item.name == 'contact'">
                <Badge
                  :count="messageCountStore.getCount('contactApplyCount')"
                  :top="1"
                  :left="10"
                ></Badge>
              </template>
            </div>
            <div :class="['title-item', item.path == currentMenu.path ? 'active' : '']">
              {{ item.title }}
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="right-side">
      <router-view v-slot="{ Component }">
        <keep-alive include="chat">
          <component :is="Component" ref="componentRef" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserInfoStore } from "@/stores/UserInfoStore";
import { useMessageCountStore } from "@/stores/MessageCountStore";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const userInfoStore = useUserInfoStore();
const messageCountStore = useMessageCountStore();

const chatNum = ref(0);
watch(
  () => messageCountStore.getCount("chatCount"),
  () => {
    chatNum.value = messageCountStore.getCount("chatCount");
  },
  { immediate: true, deep: true }
);

const menuList = ref([
  {
    name: "chat",
    icon: "icon-a-44tubiao-233",
    path: "/chat",
    title: "会话",
  },
  {
    name: "contact",
    icon: "icon-haoyou",
    path: "/contact",
    title: "通讯录",
  },
  {
    name: "setting",
    icon: "icon-shezhi1",
    title: "设置",
    path: "/setting",
  },
]);

const currentMenu = ref(menuList.value[0]);
const componentRef = ref(null);
const changeMenu = (item) => {
  currentMenu.value = item;
  router.push(item.path);
};

const getCurrentUserInfo = async () => {
  const res = await proxy.Api.queryCurrentUserInfo();
  if (res.code !== 200) {
    proxy.$message.error(res.message);
    return;
  } else {
    userInfoStore.setInfo(res.data);
  }
};
getCurrentUserInfo();

watch(
  () => route.path,
  (newVal, oldVal) => {
    if (newVal) {
      currentMenu.value = menuList.value.find((item) => {
        return newVal.includes(item.path);
      });
    }
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.main {
  background: #ddd;
  display: flex;
  border-radius: 0px 3px 3px 0px;
  overflow: hidden;
  height: 100%;
  width: 100%;

  .left-side {
    width: 70px;
    background: #2e2e2e;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    border: 1px solid #2e2e2e;
    border-right: none;
    padding-bottom: 10px;

    .menu-list {
      width: 100%;
      flex: 1;
      margin-top: 10px;

      .tab-item {
        color: #d3d3d3;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        cursor: pointer;
        font-size: 25px;
        position: relative;
      }

      .title-item {
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: #d3d3d3;
      }

      .active {
        color: #007fff;
      }
    }

    .menu-bottom {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
  }

  .right-side {
    flex: 1;
    overflow: hidden;
    border: 1px solid #ddd;
    border-left: none;
  }
}
</style>
